<template>
  <el-row class="product_list">
    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="item in data.data" :key="item.id"
            style="padding:20px;">
      <div style="width: 250px; height: 250px;margin: 0 auto;">
        <img style="width: 100%;height: 100%;"
             src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"/>
      </div>
      <div style="width: 250px; line-height: 30px;margin: 0 auto;">
        <div style="font-size: 20px;color:rgb(255, 80, 0);">{{item.price}}</div>
        <div style="color:rgb(153, 153, 153);">市场价：<span
          style="text-decoration: line-through;">{{item.marketPrice}}</span></div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-button style="width: 100%;" type="warning">放入购物车</el-button>
          </el-col>
          <el-col :span="12">
            <el-button style="width: 100%;" type="danger">立即购买</el-button>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: "ProductList",
  data() {
    return {data: []};
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //加载产品数据
    loadData() {
      const loading = this.$loading({
        target: ".product_list",
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.axios({
        url: "product/query",
        method: "POST",
        data: {size: this.data.size, page: this.data.page - 1, sorts: [{property: "idx", direction: "asc"}]}
      }).then(resp => {
        this.data.data = resp.data.data
        this.$forceUpdate();
        loading.close();
      }).catch(function (resp) {
        loading.close();
      })
    }
  }
}
</script>

<style scoped>

</style>
